{include file=comm/head.html}
<div class="product-page">
    <main>
        <div id="app">
            <section>
                <main>
                    <div class="navigate">
                        <img src="{pboot:sitetplpath}/images/home-smile-line.png" alt="" class="home" />
                        <a href=""><span>Home</span></a>
                        <img src="{pboot:sitetplpath}/images/arrow-right-s-line.png" alt="" class="arrow" />
                        <a href=""><span>Products</span></a>
                        <img src="{pboot:sitetplpath}/images/arrow-right-s-line.png" alt="" class="arrow" />
                        <a href=""><span>Truck</span></a>
                        <img src="{pboot:sitetplpath}/images/arrow-right-s-line.png" alt="" class="arrow" />
                        <a href=""><span>European truck</span></a>
                        <img src="{pboot:sitetplpath}/images/arrow-right-s-line.png" alt="" class="arrow" />
                        <span class="active">Mirror</span>
                    </div>
                </main>
            </section>
            <div class="container">
                <!-- Sidebar for categories -->
                <div class="sidebar">
                    <ul class="tree">
                        <li v-for="(category, index) in categories" :key="index">
                            <div class="parent tree-item" :class="category.open ? 'down' : ''" @click="toggleCategory(index)">
                                <span>{{ category.name }}</span>
                                <img :class="!category.open ? 'black-on' : 'black-off'" src="{pboot:sitetplpath}/images/arrow-black.png" alt="" />
                                <img :class="category.open ? 'white-on' : ''" src="{pboot:sitetplpath}/images/arrow-right.png" alt="" />
                            </div>
                            <transition name="slide-fade">
                                <ul v-if="category.open">
                                    <li v-for="(subcategory, subIndex) in category.subcategories" :key="subIndex">
                                        <div class="child tree-item" :class="subcategory.selected ? 'selected' : ''" @click="selectSubcategory(index, subIndex)">
                                            <span>{{ subcategory.name }}</span>
                                            <img v-if="!subcategory.selected" src="{pboot:sitetplpath}/images/arrow-drop-grey.png" alt="" />
                                            <img v-if="subcategory.selected" src="{pboot:sitetplpath}/images/arrow-drop-white.png" alt="" />
                                        </div>
                                    </li>
                                </ul>
                            </transition>
                        </li>
                    </ul>
                </div>

                <!-- Main content -->
                <div class="main">
                    <!-- Filters -->
                    <div class="filters">
                        <div v-for="(filter, index) in filterItems" :key="index" class="item">
                            <label class="label"><span>{{ filter.label }}</span></label>
                            <div :class="['wrap', { expanded: filter.expanded }]">
                                <div v-for="item in filter.items" :key="item" class="value">
                                    <label>
                                        <input type="checkbox" :value="item" v-model="filter.selected" class="checkbox" />
                                        <span>{{ item }}</span>
                                    </label>
                                </div>
                            </div>
                            <div class="more" @click.stop="toggleFilter(index)">
                                <span>More</span>
                                <img src="{pboot:sitetplpath}/images/arrow-blue-right.png" :class="{ rotated: filter.expanded }" />
                            </div>
                        </div>
                    </div>

                    <div class="search-wrap">
                        <div class="search-label">Search result: 1 to 10 of 406 products found. The search result is limited up to 100 products. Reduce list by using filter.</div>
                        <div class="search-and-pagination">
                            <div class="search-content">
                                <input type="text" v-model="searchQuery" placeholder="Vestibulum eget" class="search-input" />
                                <button @click="performSearch" class="search-button">
                                    <img src="{pboot:sitetplpath}/images/search-icon.png" alt="" />
                                </button>
                            </div>
                            <div class="pagination">
                                <button @click="changePage(1)" :disabled="currentPage === 1"><<</button>
                                <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1"><</button>
                                <template v-for="(page,index) in pageRange" :key="page">
                                    <button @click="changePage(page)" :class="{ 'active': page === currentPage }" class="page" :style="{'margin-right': index === totalPages - 1 ? '0' : ''}">
                                        {{ page }}
                                    </button>
                                </template>
                                <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">></button>
                                <button @click="changePage(totalPages)" :disabled="currentPage === totalPages">>></button>
                            </div>
                        </div>
                    </div>

                    <section class="product-table">
                        <main>
                            <div class="table">
                                <div class="thead">
                                    <div class="td">
                                        Product
                                    </div>
                                    <div class="td">
                                        Description
                                    </div>
                                    <div class="td">
                                        Serial number
                                    </div>
                                    <div class="td">
                                        Application<br>
                                        suitable for
                                    </div>
                                    <div class="td">
                                        Packaging<br>
                                        Unit (PU)
                                    </div>
                                    <div class="td">
                                        Availability<br>
                                        Stock
                                    </div>
                                    <div class="td">
                                        Quantity Unit (PU)
                                    </div>
                                </div>
                                <div class="tr">
                                    <div class="td product">
                                        <img src="{pboot:sitetplpath}/images/prod.jpg" alt=""  />
                                    </div>
                                    <div class="td">
                                        <span>Amet id sitrutrum aliquama congue.</span>
                                    </div>
                                    <div class="td serial">
                                        <span class="bold">1.22022</span>
                                        <span>296538</span>
                                    </div>
                                    <div class="td suitable">
                                        <span>Scania, Volvo</span>
                                    </div>
                                    <div class="td unit">
                                        <span>1 pcs</span>
                                    </div>
                                    <div class="td stock">
                                        <span>Central</span>
                                    </div>
                                    <div class="td action">
                                        <div class="btn">
                                            <img src="{pboot:sitetplpath}/images/qa2x.png" alt="">
                                        </div>
                                        <div class="btn">
                                            <img src="{pboot:sitetplpath}/images/cart2x.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="tr">
                                    <div class="td product">
                                        <img src="{pboot:sitetplpath}/images/prod.jpg" alt=""  />
                                    </div>
                                    <div class="td">
                                        <span>Amet id sitrutrum aliquama congue.</span>
                                    </div>
                                    <div class="td serial">
                                        <span class="bold">1.22022</span>
                                        <span>296538</span>
                                    </div>
                                    <div class="td suitable">
                                        <span>Scania, Volvo</span>
                                    </div>
                                    <div class="td unit">
                                        <span>1 pcs</span>
                                    </div>
                                    <div class="td stock">
                                        <span>Central</span>
                                    </div>
                                    <div class="td action">
                                        <div class="btn">
                                            <img src="{pboot:sitetplpath}/images/qa2x.png" alt="">
                                        </div>
                                        <div class="btn">
                                            <img src="{pboot:sitetplpath}/images/cart2x.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="tr">
                                    <div class="td product">
                                        <img src="{pboot:sitetplpath}/images/prod.jpg" alt=""  />
                                    </div>
                                    <div class="td">
                                        <span>Amet id sitrutrum aliquama congue.</span>
                                    </div>
                                    <div class="td serial">
                                        <span class="bold">1.22022</span>
                                        <span>296538</span>
                                    </div>
                                    <div class="td suitable">
                                        <span>Scania, Volvo</span>
                                    </div>
                                    <div class="td unit">
                                        <span>1 pcs</span>
                                    </div>
                                    <div class="td stock">
                                        <span>Central</span>
                                    </div>
                                    <div class="td action">
                                        <div class="btn">
                                            <img src="{pboot:sitetplpath}/images/qa2x.png" alt="">
                                        </div>
                                        <div class="btn">
                                            <img src="{pboot:sitetplpath}/images/cart2x.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </main>
                    </section>

                    <div class="bottom">
                        <div class="search-and-pagination">
                            <div class="search-content">
                                <input type="text" v-model="searchQuery" placeholder="Vestibulum eget" class="search-input" />
                                <button @click="performSearch" class="search-button">
                                    <img src="{pboot:sitetplpath}/images/search-icon.png" alt="" />
                                </button>
                            </div>
                            <div class="pagination">
                                <button @click="changePage(1)" :disabled="currentPage === 1"><<</button>
                                <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1"><</button>
                                <template v-for="(page,index) in pageRange" :key="page">
                                    <button @click="changePage(page)" :class="{ 'active': page === currentPage }" class="page" :style="{'margin-right': index === totalPages - 1 ? '0' : ''}">
                                        {{ page }}
                                    </button>
                                </template>
                                <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">></button>
                                <button @click="changePage(totalPages)" :disabled="currentPage === totalPages">>></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                categories: [
                    {
                        name: 'Engine',
                        open: true,
                        subcategories: [{ name: 'Bumper', selected: false }, { name: 'Hood', selected: false }, { name: 'Door', selected: false }]
                    },
                    {
                        name: 'Body',
                        open: true,
                        subcategories: [{ name: 'Bumper', selected: false }, { name: 'Hood', selected: false }, { name: 'Door', selected: false }]
                    },
                    {
                        name: 'Engine3',
                        open: true,
                        subcategories: [{ name: 'Bumper3', selected: false }, { name: 'Hood3', selected: false }, { name: 'Door3', selected: false }]
                    }
                ],
                filterItems: [
                    {
                        label: 'Brand',
                        items: ['Volvo', 'Citroen', 'DAF'],
                        selected: [],
                        expanded: false,
                    },
                    {
                        label: 'Vehicle Type',
                        items: ['Volvo FH16', 'Volvo FH', 'Volvo FM'],
                        selected: [],
                        expanded: false,
                    },
                    {
                        label: 'YEAR',
                        items: ['2000-2010', '2011-2012', '2012-2013', '2013-2014', '2014-2015', '2015-2016', '2016-2017', '2017-2018', '2018-2019', '2019-2020', '2020-2021', '2021-2022', '2022-2023', '2023-2024'],
                        selected: [],
                        expanded: false,
                    }
                ],
                selectedBrands: [],
                selectedVehicleTypes: [],
                selectedYears: [],
                searchQuery: '',
                products: [
                    { image: 'http://via.placeholder.com/100', description: 'Product 1', serialNumber: '12345', application: 'Application 1', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'Volvo', vehicleType: 'Volvo FH16', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 2', serialNumber: '12346', application: 'Application 2', packagingUnit: 'Box', availabilityStock: 'Out of Stock', quantityUnit: 'Unit', brand: 'Citroen', vehicleType: 'Volvo FH', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 3', serialNumber: '12347', application: 'Application 3', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'DAF', vehicleType: 'Volvo FM', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 4', serialNumber: '12348', application: 'Application 4', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'Volvo', vehicleType: 'Volvo FH16', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 5', serialNumber: '12349', application: 'Application 5', packagingUnit: 'Box', availabilityStock: 'Out of Stock', quantityUnit: 'Unit', brand: 'Citroen', vehicleType: 'Volvo FH', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 6', serialNumber: '12350', application: 'Application 6', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'DAF', vehicleType: 'Volvo FM', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 7', serialNumber: '12351', application: 'Application 7', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'Volvo', vehicleType: 'Volvo FH16', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 8', serialNumber: '12352', application: 'Application 8', packagingUnit: 'Box', availabilityStock: 'Out of Stock', quantityUnit: 'Unit', brand: 'Citroen', vehicleType: 'Volvo FH', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 9', serialNumber: '12353', application: 'Application 9', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'DAF', vehicleType: 'Volvo FM', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 10', serialNumber: '12354', application: 'Application 10', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'Volvo', vehicleType: 'Volvo FH16', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 11', serialNumber: '12355', application: 'Application 11', packagingUnit: 'Box', availabilityStock: 'Out of Stock', quantityUnit: 'Unit', brand: 'Citroen', vehicleType: 'Volvo FH', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 12', serialNumber: '12356', application: 'Application 12', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'DAF', vehicleType: 'Volvo FM', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 13', serialNumber: '12357', application: 'Application 13', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'Volvo', vehicleType: 'Volvo FH16', year: '2000-2010' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 14', serialNumber: '12358', application: 'Application 14', packagingUnit: 'Box', availabilityStock: 'Out of Stock', quantityUnit: 'Unit', brand: 'Citroen', vehicleType: 'Volvo FH', year: '2010-2015' },
                    { image: 'http://via.placeholder.com/100', description: 'Product 15', serialNumber: '12359', application: 'Application 15', packagingUnit: 'Box', availabilityStock: 'In Stock', quantityUnit: 'Unit', brand: 'DAF', vehicleType: 'Volvo FM', year: '2000-2010' }
                ],
                currentPage: 1,
                itemsPerPage: 5,
                pageRangeLength: 5
            };
        },
        computed: {
            totalPages() {
                return Math.ceil(this.products.length / this.itemsPerPage);
            },
            pageRange() {
                const total = this.totalPages;
                const maxPages = 10; // Maximum number of pages to display

                // If the total number of pages is less than the maximum pages, return all pages
                if (total <= maxPages) {
                    return Array.from({ length: total }, (_, i) => i + 1);
                }

                // Calculate start and end pages for pagination
                let start = Math.max(1, this.currentPage - Math.floor(maxPages / 2));
                let end = Math.min(total, start + maxPages - 1);

                // Adjust start if end is at the maximum page limit
                if (end - start + 1 < maxPages) {
                    start = Math.max(1, end - maxPages + 1);
                }

                return Array.from({ length: Math.min(maxPages, total) }, (_, i) => start + i);
            }
        },
        methods: {
            toggleFilter(index) {
                this.filterItems[index].expanded = !this.filterItems[index].expanded;
            },
            changePage(page) {
                if (page >= 1 && page <= this.totalPages) {
                    this.currentPage = page;
                }
            },
            toggleCategory(index) {
                this.categories[index].open = !this.categories[index].open;
            },
            selectSubcategory(categoryIndex, subIndex) {
                this.categories.forEach(category => {
                    category.subcategories.forEach(subcat => {
                        subcat.selected = false;
                    });
                });
                this.categories[categoryIndex].subcategories[subIndex].selected = true;
            },
            performSearch() {
                console.log('Search Query:', this.searchQuery);
                this.currentPage = 1;
            }
        }
    });
</script>
{include file=comm/foot.html}
